<style lang="sass" scoped>
    .container{
        background:#e6e6e6;
    }
    .add-addr{
        height:168px;
        background:#fff;
        padding:0 38px;
        align-items:center;
        .icon1{
            width:112px;
            height:112px;
        }
        .text{
            flex:1;
            color:#3c3c3c;
            font-size:34px;
            margin:0 25px;
        }
        .icon2{
            width:22px;
            height:40px;
        }
    }
    .addr-list{
        margin-top:10px;
        .group{
            background:#fff;
            padding:16px 38px;
            margin-bottom:10px;
            .one{
                font-size:34px;
                color:#3c3c3c;
            }
            .two{
                align-items:center;
                justify-content:space-between;
                .icon{
                    width:38px;
                    height:38px;
                    display:block;
                }
                .mr{
                    color:#bebebe;
                    font-size:22px;
                    width:66px;
                    height:32px;
                    line-height:32px;
                    background:#fff;
                    text-align:center;
                    border:1px solid #bebebe;
                }
                .text{
                    width:560px;
                    font-size:28px;
                }
                
            }
            &.active{
                .mr{
                    background:#bebebe;
                    color:#fff;
                }
            }
            .three{
                justify-content:flex-end;
                .btn{
                    font-size:28px;
                    color:#bebebe;
                    &.btn-2{
                        margin-left:32px;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="container">
        <router-link :to="{name:'home_addr_add'}" class="add-addr flex" tag="div">
            <img src="../../assets/images/order/xzsh_icon.png" class="icon1">
            <span class="text">新增收货地址</span>
            <img src="../../assets/images/order/ts_xyx.png" class="icon2">
        </router-link>
        <div class="addr-list">
            <div v-for="(item,i) in list" class="group" :class="{'active':item.isDefault===1}">
                <div @click.self="setDefault(item)" class="one">{{item.receiver}}（{{item.receiverPhone}}）</div>
                <div @click.self="setDefault(item)" class="two flex">
                    <img v-if="item.isDefault===1" class="icon" src="../../assets/images/home/ts_mr1.png" alt="">
                    <img v-else class="icon" src="../../assets/images/home/an_mr.png" alt="">
                    <span class="mr">默认</span>
                    <span class="text">{{item.receiverAddress}}</span>
                </div>
                <div class="three flex">
                    <router-link :to="{name:'home_addr_add',query:{uAddressId:item.uAddressId}}" tag="div" class="btn btn-1">编辑</router-link>
                    <div @click.stop="deleteUserAddress(item)" class="btn btn-2">删除</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                list:[]
            };
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                $('body').css({background:'#e6e6e6'});
                this.getList();
            });
        },
        methods: {
            getList(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/userAddress/getUserAddressList',
                    success:(data=>{
                        this.list = data.data;
                    })
                })
            },
            deleteUserAddress(item){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/userAddress/deleteUserAddress',
                    data:{
                        uAddressId:item.uAddressId
                    },
                    success:(data=>{
                        popup.miss({content:'删除成功！'});
                        this.getList();
                    })
                })
            },
            setDefault(item){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/userAddress/setDefault',
                    data:{
                        uAddressId:item.uAddressId
                    },
                    success:(data=>{
                        this.getList();
                    })
                })
            }
        },
        
    };
</script>